import React from "react";
import { Button, Form, Input, Space, message, notification } from "antd";
import { EyeInvisibleOutlined, EyeTwoTone } from "@ant-design/icons";
import "./index.css";
import { useSelector } from "react-redux";
import { resetPassword } from "@/redux/user/ResetPassword/ResetPasswordStore";
import { useNavigate } from "react-router-dom";

function Confirm() {
  const [form] = Form.useForm();
  const { email } = useSelector((state) => state.resetPassword);
  const navigate = useNavigate;
  const [api, contextHolder] = notification.useNotification();
  function Confirm() {
    try {
      const password = form.getFieldValue("password");
      const confirm = form.getFieldValue("confirm");
      if (password === confirm) {
        // openNotification("bottomRight");
        resetPassword(email, password);
        navigate("/login");
      }
    } catch (error) {
      message.warning("修改失败", error);
    }
  }
  const close = () => {};
  const openNotification = (placement) => {
    const key = `open${Date.now()}`;
    const btn = (
      <Space>
        <Button type="primary" size="small" onClick={() => api.destroy()}>
          Confirm
        </Button>
      </Space>
    );
    api.open({
      message: "Notification Title",
      description:
        'A function will be be called after the notification is closed (automatically after the "duration" time of manually).',
      btn,
      key,
      onClose: close,
      placement,
    });
  };

  return (
    <div className="container">
      <div className="center-container">
        <div className="title">Reset Your Password</div>
        <Form layout="horizontal" form={form}>
          <Form.Item name="password">
            <div className="email-container">
              <div className="email-label">新密码：</div>
              <Input.Password
                iconRender={(visible) =>
                  visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
                }
              />
            </div>
          </Form.Item>
          <Form.Item
            name="confirm"
            dependencies={["password"]}
            rules={[
              {
                required: true,
              },
              ({ getFieldValue }) => ({
                validator(_, value) {
                  if (!value || getFieldValue("password") === value) {
                    return Promise.resolve();
                  }
                  return Promise.reject(
                    new Error("The new password that you entered do not match!")
                  );
                },
              }),
            ]}
          >
            <div className="email-container">
              <div className="email-label">再次输入：</div>
              <Input.Password
                iconRender={(visible) =>
                  visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />
                }
              />
            </div>
          </Form.Item>
          {contextHolder}
          <div className="subimit-container">
            <Button onClick={Confirm}>Confirm</Button>
          </div>
        </Form>
      </div>
    </div>
  );
}

export default Confirm;
